<template>
  <div class="progress">
    <div class="progress_outer">
      <div class="progress_inner">
        <div class="progress_bg" :style="`width: ${progress >= 100 ? 100 : progress}%; `">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Progress',
  props: {
    progress: { // 当前进度
      type: Number,
      default: 36
    },
  }
}
</script>
<style scoped>
.progress {
  width: 100%;
  height: 3px;
  margin: 0 auto;
}

.progress_outer {
  width: 100%;
}

.progress_inner {
  /* display: inline-block; */
  width: 100%;
  /* background: #f5f5f5; */
}

.progress_bg {
  background: linear-gradient(to right, red, #cf2e1e);
  box-shadow: 3px 0px 18px 3px #ec402f;
  height: 0.1rem;
  /* transition: all .3s cubic-bezier(.08,.82,.17,1); */
}

@media only screen and (min-width:640px) {
  .progress_bg {
    height: 0.05rem;
  }
}
</style>